<template>
  <div class="goods home">
    <div class="mescroll"  ref="mescroll">
      <div class="top">
        <swiper :options="bannerHome">
          <swiper-slide class="swiper-demo-img" v-for="(item, index) in banner" :key="index">
            <a :href="item.url" v-if="item.url"><img :src="item.img"></a><img :src="item.img" v-else alt="">
          </swiper-slide>
          <div class="swiper-pagination"  slot="pagination"></div>
        </swiper>
        <div class="flex">
          <p class="left" @click="router({path: './goodsOrder'})">
            <img src="@/assets/shangcheng02.png" alt="">
            <span>我的订单</span>
          </p>
          <p class="right" @click="router({path: './cart'})">
            <img src="@/assets/shangcheng03.png" alt="">
            <i>{{cartL}}</i>
            <span>购物车</span>
          </p>
        </div>
      </div>
      <div class="goods-list">
        <div class="classify" @click="is_mask = true">
          <p>
            <span>{{classify_name}}</span>
            <img class="classify-img" src="@/assets/shangcheng05.png" alt="">
          </p>
        </div>
        <div class="list clear">
          <!--循环商品-->
          <div v-for="(item, index) in goods_lists" :key="index" class="item" @click="router({path: './goodsDetails', query: {id: item.id}})">
            <span class="img"><img :src="item.img" alt=""></span>
            <p class="title">{{item.title}}</p>
            <p class="price"><span>￥</span>{{item.price}}</p>
          </div>
        </div>
      </div>
      <div class="none" v-show="noDate">
        <img src="@/assets/sousuomendian04.png" alt="">
        <p>暂无相关内容</p>
      </div>
      <div class="mask-div" v-if="is_mask">
        <div class="mask-bg" @click="is_mask = false"></div>
        <div class="content">
          <div class="classify">
            <p @click="is_mask = false">
              <span>全部商品</span>
              <img class="classify-img" src="@/assets/shangcheng07.png" alt="">
            </p>
          </div>
          <div class="list-item clear">
            <div class="item" :class="(classifyNum == 0) ? 'active' : ''" @click="classify(0, '全部商品')">全部商品</div>
            <div v-for="(item, index) in goods_cates" :key="index" class="item"
                 :class="(classifyNum == item.id) ? 'active' : ''" @click="classify(item.id, item.title)">{{item.title}}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import {goodslists ,getcatelists, shopcartlists, goodsBanner} from '@/api/api'
import newsList from '@/components/newsList'
import 'swiper/dist/css/swiper.css'
import MeScroll from 'mescroll.js'
import 'mescroll.js/mescroll.min.css'

  export default {
    components: {
      swiper,
      swiperSlide,
      newsList
    },
    data () {
      return {
        bannerHome: {
          loop: true,
          pagination: {
            el: '.swiper-pagination',
            clickable: true
          }
        },
        classifyNum: 0,
        is_mask: false,
        classify_name: '全部商品',
        goods_lists:null,
        goods_cates:null,
        p:1,
        rows:10,
        mescroll: null, //mescroll实例对象
        cartL: 0,
        banner: [],
        noDate: false,
      }
    },
    created () {
        this.getcatelist()
        this.shop_cart_lists()
        this.goods_banner()
    },
    //实例化上拉加载
    mounted () {
      this.mescroll = new MeScroll(this.$refs.mescroll, { 
        up: {
          callback: this.upCallback
        }
      })
    },
    methods: {
      goods_banner() {
        goodsBanner().then((res) => {
          this.banner = res.data.data
        }).catch((err) => {
          console.dir(err)
        })
      },
      router (path) {
        this.$router.push(path)
      },
      classify (index, classify_name) {
        this.goods_lists = []
        this.classifyNum = index;
        this.is_mask = false;
        this.classify_name = classify_name;
        this.mescroll.resetUpScroll();
      },
      //显示分类列表
      getcatelist () {
        getcatelists().then((res) => {
          this.goods_cates = res.data.data;
        })
      },
      upCallback (page) {
        goodslists(this.classifyNum, page.num, this.rows).then((res) => {
          if (page.num == 1){
            this.goods_lists = []
          }
          this.$nextTick(() => {
            this.mescroll.endSuccess(res.data.data);
          })
          this.goods_lists = this.goods_lists.concat(res.data.data)
          if(this.goods_lists.length == 0){
            this.noDate = true;
          }
        }).catch((err) => {
          console.dir(err)
          this.mescroll.endErr()
        })
      },
      shop_cart_lists() {
        shopcartlists().then((res) => {
          this.cartL = 0;
          for(var i in res.data.data){
            this.cartL = Number(this.cartL) + Number(res.data.data[i].num)
          }
        }).catch((err) => {
          console.dir(err)
        })
      }
    }
  }
</script>

<style lang="stylus" scoped>
.goods
  background-color #f5f5f5
  min-height 100vh
  .mescroll
    position fixed
    top 0
    bottom 0
    height auto
    padding-bottom 4rem
    box-sizing border-box
    .top
      background-color #fff
      margin-bottom 1rem 
      .swiper-demo-img
        padding 1rem 1.5rem
        box-sizing border-box
      .swiper-ad-img
        padding 0
      .flex
        display flex
        height 4.5rem
        line-height 4.5rem
        text-align center
        p
          flex 1
          font-size 1.5rem
          color #333
          span
            display inline-block
            vertical-align middle
          img
            display inline-block
            vertical-align middle
            width 1.8rem
            margin-right .5rem
        .right
          position relative
          &::after
            content ''
            position absolute
            left 0
            height 60%
            top 20%
            width 1px
            background-color #e6e6e6
          i
            width 1.4rem
            height 1.4rem
            border .1rem solid #fff
            box-sizing border-box
            background-color #D03718
            font-size .9rem
            font-weight 500
            color #fff
            text-align center
            line-height 1.1rem
            position absolute
            border-radius 50%
            top .8rem
            left 6.7rem
    .goods-list
      background-color #fff
      .classify
        padding 0 1.5rem
        line-height 5.6rem
        height 5.6rem
        color #333
        font-weight 500
        font-size 1.7rem
        position sticky
        border-bottom 1px solid #e6e6e6
        margin-bottom 2rem
        top 0
        background-color #fff
        .classify-img
          position absolute
          width .8rem
          left 9rem
          top 2.6rem
      .list
        padding 0 1.5rem
        .item
          float left
          width calc(50% - .75rem)
          padding-bottom 2rem
          &:nth-child(2n+1)
            margin-right 1.5rem
          .img
            display flex
            height 12.4rem
            width 16.5rem
            img
              object-fit cover
          .title
            color #000
            font-size 1.5rem
            text-overflow ellipsis
            overflow hidden
            white-space nowrap
            padding 1rem 0
          .price
            color #D03718
            font-size 1.7rem
            height 1.3rem
            line-height 1.3rem
            span
              font-size 1.3rem
    .content
      width 100%
      top 0
      left 0
      background-color #fff
      .classify
        padding 0 1.5rem
        line-height 5.6rem
        height 5.6rem
        color #333
        font-weight 500
        font-size 1.7rem
        position relative
        border-bottom 1px solid #e6e6e6
        top 0
        background-color #fff
        .classify-img
          position absolute
          width .8rem
          left 9rem
          top 2.6rem
      .list-item
        padding 1.5rem
        padding-bottom .5rem
        .item.active
          color #172F6D
          border 1px solid #172F6D
        .item
          border 1px solid #ccc
          color #999
          font-size 1.5rem
          padding .9rem 1.2rem
          float left
          margin-right 1rem
          margin-bottom 1rem
          height 1.5rem
          line-height 1.5rem
  .none
    img
      position absolute
      top 37.3rem
      width 7.25rem
      left 50%
      margin-left -3.625rem
    p
      color #666
      font-size 1.3rem
      text-align center
      position absolute
      width 100%
      top 49rem
</style>
